<!--
 * @Author: wcc007
 * @Date: 2022-11-17 10:33:58
 * @LastEditors: wcc007
 * @LastEditTime: 2022-11-21 15:26:45
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\components\generator\form-extention\un-d-link-table\index.vue
-->
<template>
  <div class="un-d-link-table-wrap">
    <!-- 选择头 -->
    <div class="select-header">

      <!-- 下拉式 -->
      <el-select 
        v-if="selectType === 'select'"
        v-model="linkData.conditionVal"
      >
        <el-option 
          v-for="item in optionList"
          :key="item.value"
          :value="item.value" 
          :label="item.label"
        ></el-option>
      </el-select>

      <!-- 单选组式 -->
      <el-radio-group
        v-if="selectType === 'radios'"
        v-model="linkData.conditionVal"
      >
        <el-radio
          v-for="item in optionList"
          :key="item.value"
          :label="item.value"
        >{{item.label}}</el-radio>
      </el-radio-group>

    </div>

    <!-- 渲染体 -->
    <parser
      v-if="formDetail"
      :form-conf="formDetail"
      :hasConfirmBtn="false"
      @change="handleChange"
    />
  </div>
</template>

<script>
import { getForm } from '@/api/bpm/form.js'
import Parser from '@/components/parser/Parser'
import {decodeFields} from "@/utils/formGenerator";

export default {
  name: "UnDLinkTable",
  components: {
    Parser
  },
  props: {
    selectType: {
      type: String, // 选择类型，下拉或者单选组
    },
    optionList: {
      type: Array,
      default: ()=> []
    },
    updateLinkTable: {
      type: Function,
      default: () => {},
    },
    value: Object
  },
  data() {
    return {
      linkData: {
        conditionVal: this.value?.conditionVal, // 条件值
        formBody: this.value?.formBody, // 下方parser表单的formConfig
      },
      formMap: {} // 表单详情的map
    };
  },
  computed: {
    formDetail() {
      let rawDetail 
      if(this.linkData.formBody) {
        rawDetail = this.linkData.formBody // 带表单数据的值
      }else {
        rawDetail = this.formMap[this.linkData.conditionVal] // 初始值
      }

      if(rawDetail) {
        return {
          ...JSON.parse(rawDetail.conf),
          fields: decodeFields(rawDetail.fields)
        }
      }else {
        return null
      }

    }
  },
  watch: {
    optionList: {
      handler(newVal) {
        this.getFormMap(newVal)
      },
      deep: true
    },

    'linkData.conditionVal': {
      handler(newVal) {
        this.updateLinkTable({conditionVal: newVal})
      },
      immediate: true,
    }
  },
  created() {
    this.getFormMap(this.optionList)
  },
  methods: {
    // 获取form详情的map
    getFormMap(optionList) {
      // promise list
      const pList = optionList.map(item => {
        return getForm(item.value)
      })
      Promise.all(pList).then((res) => {
        const formMap = {}
        res.forEach((item,index) => {
          formMap[optionList[index].value] = item.data
        })
        this.formMap = formMap
      })
    },

    handleChange(val) {
      const baseConfig = JSON.parse(JSON.stringify(this.formDetail || {}))
      baseConfig.fields.forEach(item => {
        item.__config__.defaultValue = val[item.__vModel__]
      })
      const fields = baseConfig.fields
      delete baseConfig.fields
      const conf = baseConfig
      const formBody = {
        conf: JSON.stringify(conf),
        fields: fields.map(item => JSON.stringify(item))
      }
      this.updateLinkTable({formBody})
    }
  }
};
</script>

<style scoped lang="scss">
.un-d-link-table-wrap {
}
</style>
